<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">教室列表</block>
		</cu-custom>
<!-- 卡片 -->
		<view v-for="(item,index) in machineList" :key="index" @click="ItemClick(item.syhClassroomId)">
			<div class="hm-sms-list-card">
			  <div class="box">
			    <!-- <image class="xueshengdangan" :src="options.xueshengdangan" />
			    <image class="primary" :src="options.primary" /> -->
			    <div class="sub">
			      <div class="outer">
			        <div class="wrap">
			          <text class="paybak">教室编号：{{ item.syhClassroomNumber }}</text>
			          <!-- <text class="company">{{ options.company }}</text> -->
			        </div>
					
			        <text class="txt">当前剩余：{{ item.reserveAbleSitNum }}</text>
			      </div>
				  <div class="wrap">
				    <text class="paybak">{{ item.machine_name }}</text>
				    <!-- <text class="company">{{ options.company }}</text> -->
				  </div>
				  
			      <div class="block">
					  <text class="desc">教室信息:{{ item.syhClassroomInfo }}</text>
					  <text class="desc" style="float: right;margin-right: 10%; width: 60%;text-align: right; color: #b3c0ce;">
						  工位数量：{{ item.syhClassroomSitNumber }}
					  </text>
					
			      </div>
				  
			    </div>
				  
			    <image class="side" :src="side" />
			  </div>
			</div>
		</view>

	</view>

</template>

<script>
	import HmSmsListCard from '@/components/hm-sms-list-card/index.vue';
	export default {
		components:{HmSmsListCard},
		data() {
			
			return {
				machine:'',	//机器表id
				machineList:[],
				queryClassroomAbleSits:'/classroom/queryClassroomAbleSits',
				side:
				  '/static/hm-sms-list-card/images/img_25832_0_0.png',
			};
		},
		watch: {
			cur: {
				immediate: true,
				handler() {
					console.log('watch',this.cur)
				    this.load()
				},
			},
		},
		methods: {
			load(){
				this.$http.post(this.queryClassroomAbleSits).then(res=>{
					console.log("res",res)
					 if (res.data.success) {
						let perArr = res.data.data.result;
				        //let avatar=(perArr.avatar && perArr.avatar.length > 0)? api.getFileAccessHttpUrl(perArr.avatar):'/static/avatar_boy.png'
						//this.personalList.avatar =avatar
						console.log("perArr",perArr),
						this.machineList=perArr;
						// console.log(this.goodCategoryList);
						
						// this.personalList.name = perArr.name
						// console.log(perArr.name)
						// var test=JSON.stringify(perArr);
						
						this.getMachineList(perArr);
					}
				}).catch(err => {
					console.log(err);
				});	
				
			},
			ItemClick(syhClassroomId){
				// console.log("machine_id,id:",syhClassroomId)
			      uni.navigateTo({
			      	url:'/pages/reserve/sitList'+'?syhClassroomId='+syhClassroomId
			      })
			    },
		},
		mounted() {
			
		}
	}
	
</script>

<style>
	.hm-sms-list-card {
	  display: flex;
	  align-items: center;
	  flex-direction: row;
	  width: 750rpx;
	  height: 220rpx;
	}
	
	.box {
	  display: flex;
	  position: relative;
	  align-items: flex-start;
	  flex-direction: row;
	  justify-content: center;
	  margin-left: 16.1rpx;
	  border-radius: 32.21rpx;
	  background-color: #ffffff;
	  width: 750rpx;
	  height: 200rpx;
	  overflow: hidden;
	}
	
	.xueshengdangan {
	  position: absolute;
	  top: 66.72rpx;
	  left: 69.02rpx;
	  width: 82.82rpx;
	  height: 110.43rpx;
	}
	
	.primary {
	  position: relative;
	  margin-top: 46.01rpx;
	  margin-right: 34.51rpx;
	  width: 128.83rpx;
	  height: 115.03rpx;
	}
	
	.sub {
	  display: flex;
	  position: relative;
	  align-items: flex-start;
	  flex-direction: column;
	  margin-top: 36.81rpx;
	  margin-right: 10rpx;
	  height: 100rpx;
	  width: 90%;
	}
	
	.outer {
	  display: flex;
	  position: relative;
	  align-items: left;
	  flex-direction: row;
	  justify-content: space-between;
	  width: 100%;
	  height: 50.61rpx;
	}
	
	.wrap {
	  display: flex;
	  align-items: left;
	  flex-direction: row;
	  height: 46.01rpx;
	}
	
	.paybak {
	  opacity: 1;
	  max-width: 100%;
	  height: 46.01rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  line-height: 46.01rpx;
	  white-space: pre;
	  color: #34c1fe;
	  font-family: Helvetica;
	  font-size: 28rpx;
	  font-weight: normal;
	}
	
	.company {
	  opacity: 1;
	  max-width: 80.52rpx;
	  height: 46.01rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  line-height: 46.01rpx;
	  white-space: nowrap;
	  color: #34c1fe;
	  font-size: 32.21rpx;
	  font-weight: 400;
	}
	
	.txt {
	  opacity: 1;
	  line-height: 46.01rpx;
	  white-space: pre;
	  color: #67C23A;
	  font-family: MicrosoftYaHei, Microsoft YaHei;
	  font-size: 25.31rpx;
	  font-weight: normal;
	}
	
	.block {
	  display: flex;
	  position: relative;
	  align-items: center;
	  flex-direction: row;
	  margin-top: 16.1rpx;
	  height: 46.01rpx;
	}
	
	.desc {
	  opacity: 1;
	  line-height: 46.01rpx;
	  white-space: nowrap;
	  color: #15232e;
	  font-size: 25.31rpx;
	  font-weight: 400;
	}
	
	.side {
	  position: relative;
	  margin-top: 46.01rpx;
	  width: 16.1rpx;
	  height: 27.61rpx;
	}
</style>
